<%@ page import="com.atguigu.service.impl.ServiceServiceImpl" %>
<%@ page import="com.atguigu.service.ServiceService" %>
<%@ page import="com.atguigu.service.ServerService" %>
<%@ page import="com.atguigu.service.impl.ServerServiceImpl" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/pages/common/headAndWelcome.jsp" %><%--静态引用,包括项目起始点,和css,jquery等头部信息 --%>

<title>server-Topology页面</title>

<%--<div class="container-fluid "> <!--table行-->--%>

<div class="container-fluid">
    <div>
        <h1 class="text-center">
            <span class="uppercase">server-Topology页面</span>
        </h1>
    </div><!--head-->
    <hr>
    <div class="main" style="position: relative">
    </div><!--body-->
</div>
</body>
<script>
    function getTop(e) {
        var offset = e.offsetTop;
        if (e.offsetParent != null) offset += getTop(e.offsetParent);
        return offset;
    }
    function getLeft(e) {
        var offset = e.offsetLeft;
        if (e.offsetParent != null) offset += getLeft(e.offsetParent);
        return offset;
    }
    function f(tou,wei,kaishiyanse,jieshuyanse,yangshi) {//头,尾,开始颜色,结束颜色,样式
        let new_line;
        let options={
            startPlugColor: kaishiyanse, // 渐变色开始色#ff3792
            endPlugColor: jieshuyanse, // 渐变色结束色
            gradient: true, // 使用渐变色 true
            hide: true,//这个东西还跟线条画出有关系,true 则线条画出,false则线条不画出
        }
        if(yangshi=="xuxian"){//如果是虚线就设置这一项
            options.dash={animation: true}
        }
        // options.dash={animation: false}
        new_line=new LeaderLine(
            tou,wei,options
        )
        function addLineInElement(element,line) {
            if(element.leader_lines){
                element.leader_lines.push(line)
            }else{
                element.leader_lines=[];
                element.leader_lines.push(line)
            }
            element.onmousedown=tuodong
        }
        addLineInElement(tou,new_line)
        addLineInElement(wei,new_line)

        new_line.show(showEffectName, animOptions)
        return new_line;//返回一个函数
    }
    function tuodong (event) {
        //endEle.setPointerCapture(1);//捕获点击事件到自己身上，避免全选时其他元素被波及
        (this.setCapture && this.setCapture())||(this.setPointerCapture && this.setPointerCapture(1))
        //点上后，计算鼠标跟div的相对位置差
        event=event||window.event;
        var mx=event.clientX;
        var my=event.clientY;
        var dx=this.offsetLeft;
        var dy=this.offsetTop;
        var cx=mx-dx;
        var cy=my-dy;
        //定一个全局鼠标移动事件
        let obj=this //this表示被拖动的div
        document.onmousemove=function(event){
            event=event||window.event;
            //获取鼠标位置
            var mx=event.clientX;
            var my=event.clientY;
            //算出div顶点应该出现的位置
            var dx=mx-cx;
            var dy=my-cy;
            //重新定义div的位置
            obj.style.left=dx+"px";
            obj.style.top=dy+"px";

            let addEle=document.getElementById(event.target.id+"AddId")
            if(addEle){
                console.log("yes")
                addEle.style.left=event.target.offsetLeft+event.target.offsetWidth+"px"
                addEle.style.top=event.target.offsetTop+event.target.offsetHeight-30+"px"
            }else{
                console.log("no")
            }

            for(var i in obj.leader_lines){
                obj.leader_lines[i].position()
            }
            //定一个全局鼠标抬起事件，防止点上上层下层不触发。
            document.onmouseup=function () {
                //console.log(obj.style.left,obj.style.top); //用这里触发ajax存储到数据库中
                //全局鼠标移动事件为空
                document.onmousemove=null;
                //全局鼠标抬起事件为空
                document.onmouseup=null;
                //endEle.releasePointerCapture(1);//释放捕获鼠标事件，否则会连续捕获下去，以后次次点击都承接到他自己身上了。
                (obj.releaseCapture && obj.releaseCapture() ) ||(obj.releasePointerCapture && obj.releasePointerCapture(1) )
            }
        }
        return false//取消拖拽的搜索默认行为
    }
    const showEffectName = 'none'; //从起点到终点绘制线条 fade 淡入淡出 none 无效果，即直接显示
    const animOptions = {// 动画参数
        // duration: 1000, //持续时长
        // timing: 'ease-in', // 动画函数
    };
    function sleep(time){
        var timeStamp = new Date().getTime();
        var endTime = timeStamp + time;
        while(true){
            if (new Date().getTime() > endTime){
                return;
            }
        }
    }

    $(function (){
        let mainObj=$(".main").get(0);
        $.ajax({
            type: "post",
            url: "<%=basepath%>serverServlet?action=getServers",
            data: {},
            success: function (response, status, xhr) {
                let jsonObj=JSON.parse(response);
                let count=0
                let  ziduixianghengzuobiaoleijizhi=1
                $.each(jsonObj,function (index,item){
                    if (item.serverTypeId==2 || item.serverTypeId==1){
                        let newDiv = document.createElement("div")
                        newDiv.style.position = "absolute"
                        newDiv.style.left = 0+ "px"
                        newDiv.style.top = 0 + 70*count++ + "px"
                        newDiv.style.width = 150 + "px"
                        newDiv.style.height = 40 + "px"
                        newDiv.style.background = "#00FF00"
                        newDiv.className="target btn btn-primary"

                        $(newDiv).html(count+":"+item.name)
                        mainObj.append(newDiv);

                        let sign="no"
                        $.each(jsonObj,function (a,b){
                            if (b.masterId==item.id){
                                sign="yes";
                            }
                        })
                        if (sign=="yes"){
                            if(ziduixianghengzuobiaoleijizhi>=6){
                                ziduixianghengzuobiaoleijizhi=2
                            }else {
                                ziduixianghengzuobiaoleijizhi++
                            }
                        }
                        let countSlave=0
                        $.each(jsonObj,function (slaveIndex,slave){
                            if (slave.masterId==item.id){
                                let newDivSlave = document.createElement("div")
                                newDivSlave.style.position = "absolute"
                                newDivSlave.style.left = 200*ziduixianghengzuobiaoleijizhi + "px"
                                newDivSlave.style.top = newDiv.offsetTop+70*countSlave++ + "px"
                                newDivSlave.style.width = 150 + "px"
                                newDivSlave.style.height = 40 + "px"
                                newDivSlave.style.background = "#00B7FF"
                                newDivSlave.className="target btn btn-info"
                                $(newDivSlave).html(countSlave+":"+slave.name)
                                mainObj.append(newDivSlave)
                                let newDivLeadLine=f(newDiv,newDivSlave,kaishiyanse='#ff3792',jieshuyanse='#fff386',yanshi="shixian");
                            }
                        })
                    }
                })
            },
            timeout: 10000, //如果超时1000毫秒，就结束
            error: function (xhr, errorText, errorType) { //错误后的行为
                console.log("回信异常")
                console.log("errorText:" + errorText); //error
                console.log("errorType:" + errorType); //not found
                console.log("xhr.status:" + xhr.status); //404
                console.log("xhr.statusText:" + xhr.statusText); //not found
            },
            dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
        })//ajax
    })
</script>

</html>